<link rel='import' href='../../bower/polymer/polymer.html'>

<polymer-element name='uproxy-app-bar' attributes='disableback, color'>
  <template>
    <style>
    core-toolbar#app-bar-toolbar {
      height: 60px;
    }
    #app-bar-title {
      font-size: 18px;
      margin: 0px 18px;
      text-align: start;
      white-space: nowrap;
      overflow: hidden;
    }
    core-icon-button.back {
      cursor: pointer;
      opacity: 0.6;
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
      margin: 0;
    }
    core-icon-button.back:hover {
      opacity: 1;
      box-shadow: none;
    }
    core-toolbar {
      color: white;
    }
    </style>

    <core-toolbar id='app-bar-toolbar' style="background-color: {{color}};">
      <core-icon-button hidden?='{{ disableback }}' class='back' icon="arrow-back" on-tap='{{ back }}'></core-icon-button>
      <div id='app-bar-title' flex>
        <content></content>
      </div>
    </core-toolbar>
  </template>
  <script src='app-bar.js'></script>
</polymer-element>
